<!--
 * @Descripttion:
 * @version:
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-24 18:18:43
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
  <div class="book">
    <div class="cover">
      <span>艾瑞银行</span>
    </div>
    <div class="content">
      <p>要想没钱</p>
      <p>就用艾瑞银行</p>
    </div>
  </div>
</template>
<style lang="scss">

*{
  /* 初始化 */
  margin: 0;
  padding: 0;
}
body{
  /* 100%的窗口高度 */
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dfb88e;
}

.book{
  width: 600px;
  height: 700px;
  background-color: #fff;
  /* 开启3D效果 */
  transform-style: preserve-3d;
  /* 设置视距 */
  perspective: 2000px;
  /* 设置阴影 */
  box-shadow: inset 300px 0 30px rgba(0, 0, 0, 0.2),
  0 10px 100px rgba(0, 0, 0, 0.3);
  /* 动画过渡 */
  transition: 1s;
  margin: 0 auto;
}
/* 鼠标移入，阴影变化+旋转 */
.book:hover{
  transform: rotate(-10deg);
  box-shadow: inset 20px 0 30px rgba(0, 0, 0, 0.2),
  0 10px 100px rgba(0, 0, 0, 0.3);
}
.book::before{
  content: "";
  /* 绝对定位 */
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: 5px;
  background-color: #0d2a50;
  /* 设置旋转元素的基点位置 */
  transform-origin: bottom;
  /* 沿X轴倾斜-45度 */
  transform: skew(-45deg);
}
.book::after{
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  width: 5px;
  height: 100%;
  background-color: #3d5a83;
  transform-origin: left;
  transform: skewY(-45deg);
}
/* 封面 */
.book .cover{
  width: 100%;
  height: 100%;
  background-color: #2a3f5c;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-origin: left;
  transition: 1s;
}
.book .cover span{
  position: absolute;
  right: 30px;
  top: 30px;
  background-color: #fff;
  font-size: 40px;
  font-family: "隶书";
  /* 竖向文本 */
  writing-mode: vertical-lr;
  padding: 10px 5px 5px 5px;
  /* 字间距 */
  letter-spacing: 5px;
}

.book:hover .cover{
  transform: rotateY(-135deg);
}

.book .content{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  font-size: 40px;
  font-family: "隶书";
  line-height: 50px;
  letter-spacing: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
